
<style>
    .show-grid [class^="col-"] {
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: rgba(61, 106, 124, 0.15);
        border: 1px solid rgba(61, 106, 124, 0.2);
    }

    .show-grid {
        margin-bottom: 15px;
    }

    th small {
        font-size:12px;
        display:block;
        color:#8D8D8D;
        font-weight:normal;
    }

    /*
     * Responsive tests
     *
     * Generate a set of tests to show the responsive utilities in action.
     */

    /* Responsive (scrollable) doc tables */
    .table-responsive .highlight pre {
        white-space: normal;
    }

    /* Utility classes table  */
    .bs-table th small,
    .responsive-utilities th small {
        display: block;
        font-weight: normal;
        color: #999;
        font-size:12px;
    }
    .responsive-utilities tbody th {
        font-weight: normal;
    }
    .responsive-utilities td {
        text-align: center;
    }
    .responsive-utilities td.is-visible {
        color: rgba(61, 106, 124, 1);
        background-color: rgba(61, 106, 124, 0.07) !important;
    }
    .responsive-utilities td.is-hidden {
        color: #ccc;
        background-color: #f9f9f9 !important;
    }

    /* Responsive tests */
    .responsive-utilities-test {
        margin-top: 5px;
    }
    .responsive-utilities-test .col-xs-6 {
        margin-bottom: 10px;
    }
    .responsive-utilities-test span {
        padding: 15px 10px;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.1;
        text-align: center;
        border-radius: 4px;
    }
    .visible-on .col-xs-6 .hidden-xs,
    .visible-on .col-xs-6 .hidden-sm,
    .visible-on .col-xs-6 .hidden-md,
    .visible-on .col-xs-6 .hidden-lg,
    .hidden-on .col-xs-6 .visible-xs,
    .hidden-on .col-xs-6 .visible-sm,
    .hidden-on .col-xs-6 .visible-md,
    .hidden-on .col-xs-6 .visible-lg {
        color: #999;
        border: 1px solid #ddd;
    }
    .visible-on .col-xs-6 .visible-xs,
    .visible-on .col-xs-6 .visible-sm,
    .visible-on .col-xs-6 .visible-md,
    .visible-on .col-xs-6 .visible-lg,
    .hidden-on .col-xs-6 .hidden-xs,
    .hidden-on .col-xs-6 .hidden-sm,
    .hidden-on .col-xs-6 .hidden-md,
    .hidden-on .col-xs-6 .hidden-lg {
        color: #468847;
        background-color: #dff0d8;
        border: 1px solid #d6e9c6;
    }
</style>

<div class="well">
    <h1>网格选项</h1>
    <p>
		通过表格，可以很方便的查看Bootstrap网格系统各种配置选项的效果 
        <br>
        <br>
    </p>


    <div class="row ">
            <div class="col-sm-3 ">
                <img src="img/demo/responseimg.png" style="max-width:300px; width:100%;">
            <p>
                <br>
				<h3>构建Bootstrap</h3> 
				Bootstrap不仅仅在桌面浏览器上边线出色，而且智能移动设备上，也同样有出色表现。
				它有很多特性，比如可以优先适应12列的移动网格，很多的的组件和插件，等等。 
        
</div>
		
        <div class="col-sm-9 ">
                <table class="table table-bordered table-striped">
                <thead>
					<tr>
						<th></th>
						<th> 超小型设备 <small>苹果 (&lt;768px)</small></th>
						<th> 小型设备 <small>掌上设备 (&lt;768px)</small></th>
						<th> 中等大小设备 <small>台式机 (&lt;992px)</small></th>
						<th> 大型设备 <small>台式机 (&lt;1200px)</small></th>
					</tr>
                </thead>
                <tbody>
					<tr>
						<th>网格效果</th>
						<td>总是水平显示</td>
						<td colspan="3">开始折叠，在某个点事水平化</td>
					</tr>
					
					<tr>
						<th>最大容纳宽度</th>
						<td>自动</td>
						<td>750px</td>
						<td>970px</td>
						<td>1170px</td>
					</tr>
					
					<tr>
						<th>前缀class样式</th>
						<td>
							<code>
								.col-xs-
							</code></td>
						<td>
							<code>
								.col-sm-
							</code></td>
						<td>
							<code>
								.col-md-
							</code></td>
						<td>
							<code>
								.col-lg-
							</code></td>
					</tr>
					
					<tr>
						<th># 列数</th>
						<td colspan="4">12</td>
					</tr>
					
					<tr>
						<th>最大列宽度</th>
						<td class="text-muted">自动</td>
						<td>60px</td>
						<td>78px</td>
						<td>95px</td>
					</tr>
					
					<tr>
						<th>间距宽度</th>
						<td colspan="4">30px (列两边各15px)</td>
					</tr>
					
					<tr>
						<th>是否可嵌套</th>
						<td colspan="4">是</td>
					</tr>
					
					<tr>
						<th>偏移量</th>
						<td colspan="1" class="text-muted">N/A</td>
						<td colspan="3">是</td>
					</tr>
					
					<tr>
						<th>列是否排序</th>
						<td class="text-muted">N/A</td>
						<td colspan="3">是</td>
					</tr>
                </tbody>
            </table>
        
</div>
    
</div>
</div>
 
<h6>示例: 水平连续的列</h6>
<p>
    使用一系列网格样式 <code>.col-md-*</code>，你可以创建一个基本的网格体系，并将它们放置在移动设备上，或者桌面设备上(从超小网格到小型网格)
</p>
<div class="well"> 
	<div class="row show-grid">
    		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
		<div class="col-md-1 ">
    .col-md-1
</div>
    
</div>
	
	<div class="row show-grid">
    		<div class="col-md-8 ">
    .col-md-8
</div>
		<div class="col-md-4 ">
    .col-md-4
</div>
    
</div>

	<div class="row show-grid">
    		<div class="col-md-4 ">
    .col-md-4
</div>
		<div class="col-md-4 ">
    .col-md-4
</div>
		<div class="col-md-4 ">
    .col-md-4
</div>
    
</div>

    <div class="row show-grid">
    		<div class="col-md-6 ">
    .col-md-6
</div>
		<div class="col-md-6 ">
    .col-md-6
</div>
    
</div>
</div>

<h6>示例: 移动和平板</h6>
<p>不想让你的列在小型设备上出现简单的重叠？可以在你的列元素中，添加超小或者中等设备网格样式<code>.col-xs-*</code> <code>.col-md-*</code>，看下面示例，边知道这些样式是怎么狠好的起作用。</p>
<div class="well"> 
    <div class="row show-grid">
    		<div class="col-md-8 col-xs-12 ">
    .col-xs-12 col-md-8
</div>
		<div class="col-md-4 col-xs-6">
    .col-xs-6 .col-md-4
</div>
    
</div>

    <div class="row show-grid">
    		<div class="col-md-4 col-xs-6">
    .col-xs-6 .col-md-4
</div>
		<div class="col-md-4 col-xs-6">
    .col-xs-6 .col-md-4
</div>
		<div class="col-md-4 col-xs-6">
    .col-xs-6 .col-md-4
</div>
    
</div>

    <div class="row show-grid">
    		<div class="col-xs-6 ">
    .col-xs-6
</div>
		<div class="col-xs-6 ">
    .col-xs-6
</div>
    
</div>
</div>

<h6>示例: 移动, 平板, 桌面</h6>
<p>在前面示例基础之上，你可以通过样式，创造出更加灵活和功能强大的布局<code>.col-sm-*</code>。</p> 
<div class="well">
    <div class="row show-grid">
    		<div class="col-md-8 col-xs-12 col-sm-6">
    col-xs-12 col-sm-6 col-md-8
</div>
		<div class="col-md-4 col-xs-6 col-sm-6">
    .col-xs-6 .col-sm-6 .col-md-4
</div>
    
</div>

    <div class="row show-grid">
    		<div class="col-md-4 .col-xs-6 .col-sm-4">
    col-xs-6 col-sm-4 col-md-4
</div>
		<div class="col-md-4 .col-xs-6 .col-sm-4">
    col-xs-6 col-sm-4 col-md-4
</div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs"></div>
		<div class="col-md-4 .col-xs-6 .col-sm-4">
    col-xs-6 col-sm-4 col-md-4
</div>
    
</div>
</div>

<h6>偏移量列</h6>
<p>添加样式<code>.col-md-offset-*</code>，可以讲列移动到右边，通过样式 <code>*</code>，这些样式可以增大列左边的边距。例如，列<code>.col-md-offset-4</code>可以使用列<code>.col-md-4</code>移动4个列大小。</p>
<div class="well"> 
    <div class="row show-grid">
    		<div class="col-md-4 ">
    .col-md-4
</div>
		<div class="col-md-4 col-md-offset-4">
    .col-md-4 .col-md-offset-4
</div>
    
</div>

    <div class="row show-grid">
    		<div class="col-md-3 col-md-offset-3">
    .col-md-3 .col-md-offset-3
</div>
		<div class="col-md-3 col-md-offset-3">
    .col-md-3 .col-md-offset-3
</div>
    
</div>

    <div class="row show-grid">
    		<div class="col-md-6 col-md-offset-3">
    .col-md-6 .col-md-offset-3
</div>
    
</div>
</div>

<h6>内嵌列</h6>
<p>将你的内容内嵌到一个默认的网格中，请使用以下样式，一个<code>.row</code>，一组<code>.col-md-*</code>，内嵌行最多可以12列</p>
<div class="well"> 
    <div class="row show-grid">
            <div class="col-md-12">
            Level 1: .col-md-12
            <div class="row show-grid">
                    <div class="col-md-6">
                    Level 2: .col-md-6
                </div>
                <div class="col-md-6">
                    Level 2: .col-md-6
                </div>
            
</div>
        </div>
    
</div>
</div>

<hr class="simple">

<div class="well">
    <h1>Responsive utilities</h1>
    <p class="alert alert-info">
            <strong>
            For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
        </strong>
    
</p>
    <p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
    <h3>可使用的class样式</h3>
    <p>通过viewport breakpoints，您可以使用单个或多个class组合，来切换内容</p>
    <table class="table table-bordered table-striped responsive-utilities">
        <thead>
			<tr>
				<th></th>
				<th>
					超小型设备
					<small>苹果 (&lt;768px)</small>
				</th>
				
				<th>
					小型设备
					<small>掌上设备 (&lt;768px)</small>
				</th>
				
				<th>
					媒体设备
					<small>台式机 (&lt;992px)</small>
				</th>
				
				<th>
					大型设备
					<small>台式机 (&lt;1200px)</small>
				</th>
			</tr>
        </thead>
		
        <tbody>
			<tr> 
				<th><code>
    .visible-xs
</code></th>
				<td class="is-visible ">
    Visible
</td>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-hidden ">
    隐藏
</td>
			</tr>
			
			<tr> 
				<th><code>
    .visible-sm
</code></th>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-visible ">
    可见
</td>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-hidden ">
    隐藏
</td>
			</tr>
			
			<tr> 
				<th><code>
    .visible-md
</code></th>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-visible ">
    Visible
</td>
				<td class="is-hidden ">
    隐藏
</td>
			</tr>
			
			<tr> 
				<th><code>
    .visible-lg
</code></th>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-visible ">
    可见
</td>
			</tr>
        </tbody>
		
        <tbody>
			<tr> 
				<th><code>
    .hidden-xs
</code></th>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-visible ">
    可见
</td>
				<td class="is-visible ">
    可见
</td>
				<td class="is-visible ">
    可见
</td>
			</tr>
			
			<tr> 
				<th><code>
    .hidden-sm
</code></th>
				<td class="is-visible ">
    可见
</td>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-visible ">
    可见
</td>
				<td class="is-visible ">
    可见
</td>
			</tr>
			
			<tr> 
				<th><code>
    .hidden-md
</code></th>
				<td class="is-visible ">
    可见
</td>
				<td class="is-visible ">
    可见
</td>
				<td class="is-hidden ">
    隐藏
</td>
				<td class="is-visible ">
    可见
</td>
			</tr>
			
			<tr> 
				<th><code>
    .hidden-lg
</code></th>
				<td class="is-visible ">
    可见
</td>
				<td class="is-visible ">
    可见
</td>
				<td class="is-visible ">
    可见
</td>
				<td class="is-hidden ">
    隐藏
</td>
			</tr>
        </tbody>
    </table> 
</div>

<section id="widget-grid" class="">
        <div class="row ">
     
</div>

</section>
 <!-- end widgetGrid -->
 

<script type="text/javascript">
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();

	// PAGE RELATED SCRIPTS

	// pagefunction
	
	var pagefunction = function() {
		
	};
	
	// end pagefunction
	
	// run pagefunction on load

	pagefunction();

</script>